<template>
  <view class="star-map-container">
    <!-- 顶部导航 -->
    <view class="top-nav">
      <text class="nav-title">知识星图</text>
      <view class="search-icon">🔍</view>
    </view>

    <!-- 星星容器 -->
    <view class="scroll-wrapper">
      <view class="stars-container">
        <Star
          v-for="star in filteredStars"
          :key="star.id"
          :name="star.name"
          :state="star.state"
          :x="star.x"
          :y="star.y"
          :size="star.size"
          :id="star.id"
          @click="handleStarClick"
        />
      </view>
    </view>

    <!-- 底部控制栏 -->
    <view class="bottom-controls">
      <view class="filter-buttons">
        <text class="filter-btn active" @click="filterStars('all')">全部</text>
        <text class="filter-btn" @click="filterStars('learned')">已学</text>
        <text class="filter-btn" @click="filterStars('unlearned')">未学</text>
      </view>
      <view class="action-buttons">
        <text class="action-btn" @click="toggleLegend" >图例</text>
        <text class="action-btn" @click="zoomOut">-</text>
        <text class="action-btn" @click="zoomIn">+</text>
      </view>
    </view>
  </view>
</template>

<script>
import Star from '@/components/Star.vue';

export default {
  components: {
    Star
  },
  data() {
    return {
      stars: [
        { id: 1, name: '量子力学', state: 0, x: '20%', y: '30%', size: 36 },
        { id: 2, name: '光的衍射', state: 2, x: '50%', y: '20%', size: 40 },
        { id: 3, name: '电磁感应', state: 1, x: '80%', y: '25%', size: 36 },
        { id: 4, name: '波粒二象性', state: 1, x: '40%', y: '35%', size: 32 },
        { id: 5, name: '力学定律', state: 2, x: '60%', y: '32%', size: 36 },
        { id: 6, name: '电磁场', state: 0, x: '85%', y: '38%', size: 32 },
        { id: 7, name: '物理运动', state: 3, x: '30%', y: '50%', size: 44 },
        { id: 8, name: '牛顿第二定律', state: 3, x: '70%', y: '45%', size: 44 },
        { id: 9, name: '能量守恒', state: 1, x: '15%', y: '65%', size: 36 },
        { id: 10, name: '麦克斯韦方程组', state: 0, x: '80%', y: '60%', size: 32 },
        { id: 11, name: '动量定理', state: 1, x: '45%', y: '70%', size: 36 }
      ],
      filter: 'all',
      zoomLevel: 1,
      activeFilter: 'all',
      legendVisible: false // 重命名数据属性避免冲突
    };
  },
  computed: {
    filteredStars() {
      if (this.filter === 'all') return this.stars;
      if (this.filter === 'learned') return this.stars.filter(s => s.state >= 2);
      if (this.filter === 'unlearned') return this.stars.filter(s => s.state < 2);
      return this.stars;
    }
  },
  mounted() {
    this.adjustContainerSize();
    window.addEventListener('resize', this.adjustContainerSize);
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.adjustContainerSize);
  },
  watch: {
    filteredStars() {
      this.$nextTick(() => this.adjustContainerSize());
    },
    zoomLevel() {
      this.$nextTick(() => this.adjustContainerSize());
    }
  },
  methods: {
    adjustContainerSize() {
      // 计算所有星星的最大位置以确定容器宽度
      const stars = document.querySelectorAll('.star-component');
      if (!stars.length) return;

      let maxRight = 0;
      stars.forEach(star => {
        const rect = star.getBoundingClientRect();
        const containerRect = document.querySelector('.stars-container').getBoundingClientRect();
        const starRight = rect.right - containerRect.left;
        maxRight = Math.max(maxRight, starRight);
      });

      // 设置容器最小宽度以确保所有星星可见
      const container = document.querySelector('.stars-container');
      if (container) {
        container.style.minWidth = `${maxRight + 40}px`; // 额外添加40px padding
      }
    },
    filterStars(status) {
      this.filter = status;
      // 更新按钮激活状态
      const buttons = document.querySelectorAll('.filter-btn');
      buttons.forEach(btn => btn.classList.remove('active'));
      event.currentTarget.classList.add('active');
    },
    showLegend() {
      uni.showModal({
        title: '图例说明',
        content: '● 灰色: 未学习\n● 灰白色: 初学习\n● 黄色: 熟练\n● 黄色光晕: 掌握',
        showCancel: false
      });
    },
    zoomIn() {
      if (this.zoomLevel < 2) {
        this.zoomLevel += 0.1;
        document.documentElement.style.setProperty('--zoom-level', this.zoomLevel);
      }
    },
    zoomOut() {
      if (this.zoomLevel > 0.5) {
        this.zoomLevel -= 0.1;
        document.documentElement.style.setProperty('--zoom-level', this.zoomLevel);
      }
    },
    toggleLegend() {
      this.legendVisible = !this.legendVisible; // 更新方法中的引用
    },
    handleStarClick(e) {
      // 获取点击的星星id
      const starId = e.id;
      // 导航到详情页面，传递id参数
      uni.navigateTo({
        url: `/pages/knowledge/knowledgeDetail?id=${starId}`
      });
    }
  }
};
</script>

<style scoped>
.star-map-container {
  position: relative;
  height: 100vh;
  background-color: #0a1930;
  /* 移除overflow: hidden，允许子元素滚动 */
}

.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  color: #ffffff;
}

.nav-title {
  font-size: 36rpx;
  font-weight: bold;
}

.search-icon {
  font-size: 32rpx;
}

.scroll-wrapper {
  width: 100%;
  height: calc(100% - 200rpx);
  overflow-x: auto; /* 强制显示横向滚动条 */
  overflow-y: auto;
}

.stars-container {
  position: relative;
  min-width: max-content; /* 确保内容宽度触发滚动 */
  min-height: max-content;
  width: calc(100% * var(--zoom-level, 1)); /* 实际宽度 = 视口宽度 × 缩放级别 */
  height: calc(100% * var(--zoom-level, 1)); /* 实际高度 = 视口高度 × 缩放级别 */
  padding: 20rpx;
  transition: width 0.3s ease, height 0.3s ease; /* 平滑过渡尺寸变化 */
}

.bottom-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); /* 添加底部安全距离 */
  background-color: rgba(10, 25, 48, 0.8);
  border-top: 1rpx solid rgba(255, 255, 255, 0.1);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.filter-buttons {
  display: flex;
  gap: 20rpx;
}

.filter-btn {
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 28rpx;
  color: #cccccc;
  background-color: rgba(255, 255, 255, 0.1);
}

.filter-btn.active {
  color: #ffffff;
  background-color: #165dff;
}

.action-buttons {
  display: flex;
  gap: 15rpx;
}

.action-btn {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 28rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>


